<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/resources/jstl_contexpath.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>虎丘婚纱城管理系统</title>
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/bs3/css/bootstrap.min.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/bootstrap-reset.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/font-awesome/css/font-awesome.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/clndr.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/style.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/style-responsive.css" />" />

    <!-- start: CSS -->
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/assets/css/bootstrap.min.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/assets/css/style.min.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/assets/css/retina.min.css" />" />
    <!-- end: CSS -->

    <!-- start: Favicon and Touch Icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<c:url value="/resources/assets/ico/apple-touch-icon-144-precomposed.png" />" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<c:url value="/resources/assets/ico/apple-touch-icon-114-precomposed.png" />" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<c:url value="/resources/assets/ico/apple-touch-icon-72-precomposed.png" />" />
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="<c:url value="/resources/assets/ico/apple-touch-icon-57-precomposed.png" />" />
    <link rel="shortcut icon" href="<c:url value="/resources/assets/ico/favicon.png" />" />
    <!-- end: Favicon and Touch Icons -->

    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/base.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/hq.css" />" />
</head>
<body>

<!-- start: Header -->
<%@ include file="/resources/head.jsp" %>
<!-- end: Header -->

<div class="container">
    <div class="row">
        <!-- start: Main Menu -->
        <%@ include file="/resources/sidebar.jsp" %>
        <!-- end: Main Menu -->

        <!-- start: Content -->
        <div id="content" class="col-lg-10 col-sm-11">
            <div class="row sortable">
                <div class="col-lg-12">
                    <div class="box">
                        <div class="box-header">
                            <h2><i class="fa fa-align-justify"></i><span class="break"></span>选择模板</h2>
                            <div class="box-icon">
                            </div>
                        </div>
                        <div class="box-content">
                            <div class="box-area">
                                <ul class="item-lists">
                                    <c:forEach var="activity_templet" items="${activity_templet_list}" varStatus="status">
                                        <li class="item">
                                            <div class="item-box">
                                                <div class="item-img">
                                                    <a href="${ctx}/manage/activity/add?templet_id=${activity_templet.id}">
                                                        <img src="${ctx}${activity_templet.cover_url}" alt="${activity_templet.name}" data-src="${ctx}${activity_templet.preview_url}">
                                                    </a>
                                                    <p style="margin-top: 15px;">
                                                        <button type="button" class="btn btn-primary">
                                                            <span class="btn-icon-text">使用该模板</span>
                                                        </button>
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                    </c:forEach>

                                    <li class="item">
                                        <div class="item-box">
                                            <div class="item-img">
                                                <a href="#">
                                                    <img src="${ctx}/files/templet/activity/toupiao_cover.png" alt="敬请期待" data-src="${ctx}/files/templet/activity/toupiao_cover.png">
                                                </a>
                                                <p style="margin-top: 15px;">
                                                    <button type="button" class="btn btn-primary disabled" >
                                                        <span class="btn-icon-text">敬请期待</span>
                                                    </button>
                                                </p>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="item">
                                        <div class="item-box">
                                            <div class="item-img">
                                                <a href="#">
                                                    <img src="${ctx}/files/templet/activity/youhuiquan_cover.png" alt="敬请期待" data-src="${ctx}/files/templet/activity/youhuiquan_cover.png">
                                                </a>
                                                <p style="margin-top: 15px;">
                                                    <button type="button" class="btn btn-primary disabled" >
                                                        <span class="btn-icon-text">敬请期待</span>
                                                    </button>
                                                </p>
                                            </div>
                                        </div>
                                    </li>


                                    <li class="item">
                                        <div class="item-box">
                                            <div class="item-img">
                                                <a href="#">
                                                    <img src="${ctx}/files/templet/activity/choujiang_cover.png" alt="敬请期待" data-src="${ctx}/files/templet/activity/choujiang_cover.png">
                                                </a>
                                                <p style="margin-top: 15px;">
                                                    <button type="button" class="btn btn-primary disabled" >
                                                        <span class="btn-icon-text">敬请期待</span>
                                                    </button>
                                                </p>
                                            </div>
                                        </div>
                                    </li>


                                    <li class="item">
                                        <div class="item-box">
                                            <div class="item-img">
                                                <a href="#">
                                                    <img src="${ctx}/files/templet/activity/youxi_cover.png" alt="敬请期待" data-src="${ctx}/files/templet/activity/youxi_cover.png">
                                                </a>
                                                <p style="margin-top: 15px;">
                                                    <button type="button" class="btn btn-primary disabled" >
                                                        <span class="btn-icon-text">敬请期待</span>
                                                    </button>
                                                </p>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="item">
                                        <div class="item-box">
                                            <div class="item-img">
                                                <a href="#">
                                                    <img src="${ctx}/files/templet/activity/tobedesign_cover.png" alt="敬请期待" data-src="${ctx}/files/templet/activity/tobedesign_preview.png">
                                                </a>
                                                <p style="margin-top: 15px;">
                                                    <button type="button" class="btn btn-primary disabled" >
                                                        <span class="btn-icon-text">敬请期待</span>
                                                    </button>
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <%@ include file="/resources/page.jsp"%>
                        </div>
                    </div>
                </div><!--/col-->
            </div>
        </div>
    </div>
</div>
<%@ include file="/resources/managerfoot.jsp"%>

<!-- start: JavaScript-->
<script type="text/javascript" src="<c:url value="/resources/assets/js/jquery-2.1.0.min.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/assets/js/jquery-migrate-1.2.1.min.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/assets/js/bootstrap.min.js" />" ></script>

<!-- page scripts -->
<script type="text/javascript" src="<c:url value="/resources/assets/js/jquery-ui-1.10.3.custom.min.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/assets/js/jquery.sparkline.min.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/assets/js/jquery.dataTables.min.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/assets/js/dataTables.bootstrap.min.js" />" ></script>

<!-- theme scripts -->
<script type="text/javascript" src="<c:url value="/resources/assets/js/custom.min.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/assets/js/core.min.js" />" ></script>

<!-- inline scripts related to this page -->
<script type="text/javascript" src="<c:url value="/resources/assets/js/pages/table.js" />" ></script>

<!-- end: JavaScript-->
<script>
    <%--$('#choose').click(function(){--%>
        <%--//var choose_org_id = $('#choose_org_id').val();--%>

        <%--var template = $('#channel_type option:selected').val();--%>
        <%--window.location.href="${ctx}/manage/system/activity/add?template="+template;--%>
    <%--});--%>

    $('.item-lists').on("click","a",function(e){
        e.preventDefault();
        e.stopPropagation();
        return false;
    })
    $('.item-lists').on('click','li img',function(e){
//        e.preventDefault();
//        e.stopPropagation();
//        var _ = $(this),
//                imgUrl = _.attr('data-src');
//        var $mask = $('<div class="mask"></div>');
//        $mask.append('<div class="mask_content"></div>');
//        $mask.find("div").append('<img />');
//        $mask.find('img').attr('src',imgUrl);
//        $('body').append($mask).fadeIn(300);
//        $mask.on("click",function(){
//            $(this).remove();
//        });
        e.preventDefault();
        e.stopPropagation();
        var _ = $(this),
                imgUrl = _.attr('data-src');
        var $mask = $('<div class="mask"></div>');
        var temp = '<div style="display:table;margin: 0 auto; text-align:center"><div class="mask_content"></div><img /></div>';
        $mask.html(temp).find("img").attr('src',imgUrl)
        $('body').append($mask).fadeIn(300);
        $mask.css({overflowY:'auto',display:'block'}).on("click",function(){
            $(this).remove();
        });

    });
    $('.item-lists').on('click',".item-box .btn",function(){
        var _ = $(this),
                linkUrl = _.parent().prev().attr('href');
        var confirm = window.confirm('确定要使用该模板？');
        if(!!confirm){
            window.location.href = linkUrl;
        } else{
            return;
        }
    });
</script>
</body>
</html>